#インタラクション

名前空間:options.interaction、グローバルインタラクション構成は次のとおりです。Chart.defaults.interaction。どのイベントがチャートのインタラクションをトリガーするかを構成するには、を参照してください。イベント。

名前	タイプ	デフォルト	説明
`mode`	`string`	`'nearest'`	インタラクションにどの要素が表示されるかを設定します。見るインタラクションモード詳細については。
`intersect`	`boolean`	`true`	true の場合、インタラクションモードは、マウスの位置がチャート上の項目と交差する場合にのみ適用されます。
`axis`	`string`	`'x'`	に設定できます`'x'`、`'y'`、`'xy'`また`'r'`距離の計算にどの方向を使用するかを定義します。デフォルトは`'x'`ために`'index'`モードと`'xy'`の`dataset`と`'nearest'`モード。
`includeInvisible`	`boolean`	`false`	true の場合、インタラクションを評価するときに、チャート領域の外側にある非表示のポイントも含まれます。

デフォルトでは、これらのオプションはホバー操作とツールチップ操作の両方に適用されます。同じオプションをoptions.hover名前空間。この場合、ホバー操作にのみ影響します。同様に、オプションはoptions.plugins.tooltip名前空間を使用してツールチップのインタラクションを独立して設定します。

#イベント

次のプロパティは、チャートがイベントとどのように対話するかを定義します。名前空間:options

名前	タイプ	デフォルト	説明
`events`	`string[]`	`['mousemove', 'mouseout', 'click', 'touchstart', 'touchmove']`	の`events`オプションは、チャートがリッスンする必要があるブラウザーイベントを定義します。これらの各イベントはホバーをトリガーし、プラグインに渡されます。もっと...
`onHover`	`function`	`null`	chartArea 上でいずれかのイベントが発生したときに呼び出されます。イベント、アクティブな要素の配列 (棒、点など)、およびチャートを渡します。
`onClick`	`function`	`null`	イベントのタイプが次の場合に呼び出されます。`'mouseup'`、`'click'`また '`'contextmenu'`チャートエリア上。イベント、アクティブな要素の配列、およびチャートを渡します。

#イベントオプション

たとえば、グラフがクリックイベントにのみ応答するようにするには、次のようにします。

const chart = new Chart(ctx, {
  type: 'line',
  data: data,
  options: {
    // This chart will not respond to mousemove, etc
    events: ['click']
  }
});

各プラグインのイベントは、プラグインオプションで (許可された) イベント配列を定義することでさらに制限できます。

const chart = new Chart(ctx, {
  type: 'line',
  data: data,
  options: {
    // All of these (default) events trigger a hover and are passed to all plugins,
    // unless limited at plugin options
    events: ['mousemove', 'mouseout', 'click', 'touchstart', 'touchmove'],
    plugins: {
      tooltip: {
        // Tooltip will only receive click events
        events: ['click']
      }
    }
  }
});

chartArea では発生しないイベント (次のような)mouseout、簡単なプラグインを使用してキャプチャできます。

const chart = new Chart(ctx, {
  type: 'line',
  data: data,
  options: {
    // these are the default events:
    // events: ['mousemove', 'mouseout', 'click', 'touchstart', 'touchmove'],
  },
  plugins: [{
    id: 'myEventCatcher',
    beforeEvent(chart, args, pluginOptions) {
      const event = args.event;
      if (event.type === 'mouseout') {
        // process the event
      }
    }
  }]
});

プラグインの詳細については、次を参照してください。プラグイン

#イベントをデータ値に変換する

よくあるのは、クリックなどのイベントを取得し、イベントが発生したチャート上のデータ座標を見つけることです。 Chart.js は、これを簡単なプロセスにするヘルパーを提供します。

const chart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        onClick: (e) => {
            const canvasPosition = Chart.helpers.getRelativePosition(e, chart);
            // Substitute the appropriate scale IDs
            const dataX = chart.scales.x.getValueForPixel(canvasPosition.x);
            const dataY = chart.scales.y.getValueForPixel(canvasPosition.y);
        }
    }
});

バンドラーを使用する場合、ヘルパー関数を個別にインポートする必要があります。これについての詳しい説明については、次のページを参照してください。統合ページ

#モード

を介してグラフとの対話を設定する場合interaction、hoverまたtooltips、さまざまなモードが利用可能です。

options.hoverとoptions.plugins.tooltipから伸びるoptions.interaction。それで、もしmode、intersectまたはその他の一般的な設定は、options.interaction、ホバーとツールチップの両方がこれに従います。

モードとそれらがどのように動作するかについては、以下で詳しく説明します。intersect設定。

さまざまなモードがツールチップでどのように機能するかを確認してください。ツールチップのインタラクションのサンプル

#点

ポイントと交差するすべてのアイテムを検索します。

const chart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        interaction: {
            mode: 'point'
        }
    }
});

#最寄りの

ポイントに最も近い距離にあるアイテムを取得します。最も近い項目は、グラフ項目 (点、棒) の中心までの距離に基づいて決定されます。使用できますaxis距離計算でどの座標を考慮するかを定義する設定。もしもintersecttrue の場合、これはマウスの位置がグラフ内の項目と交差する場合にのみトリガーされます。これは、ポイントがバーの後ろに隠れているコンボチャートに非常に便利です。

const chart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        interaction: {
            mode: 'nearest'
        }
    }
});

#索引

同じインデックスで項目を検索します。もしintersect設定が true の場合、最初に交差する項目がデータ内のインデックスを決定するために使用されます。もしもintersectfalse の場合、x 方向で最も近い項目がインデックスの決定に使用されます。

const chart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        interaction: {
            mode: 'index'
        }
    }
});

横棒グラフのようなグラフでインデックスモードを使用し、y 方向に沿って検索するには、axisv2.7.0 で導入された設定。この値を次のように設定すると、'y'y 方向のが使用されます。

const chart = new Chart(ctx, {
    type: 'bar',
    data: data,
    options: {
        interaction: {
            mode: 'index',
            axis: 'y'
        }
    }
});

#データセット

同じデータセット内のアイテムを検索します。もしintersect設定が true の場合、最初に交差する項目がデータ内のインデックスを決定するために使用されます。もしもintersectfalse は、最も近い項目を使用してインデックスを決定します。

const chart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        interaction: {
            mode: 'dataset'
        }
    }
});

#バツ

に基づいて交差するすべてのアイテムを返します。X位置の座標のみ。垂直カーソルの実装に役立ちます。これはデカルトチャートにのみ適用されることに注意してください。

const chart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        interaction: {
            mode: 'x'
        }
    }
});

#y

に基づいて交差するすべてのアイテムを返します。Y位置の座標。これは水平カーソルの実装に役立ちます。これはデカルトチャートにのみ適用されることに注意してください。

const chart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        interaction: {
            mode: 'y'
        }
    }
});

#カスタムインタラクションモード

新しいモードは、関数を追加することで定義できます。Chart.Interaction.modes地図。使用できますChart.Interaction.evaluateInteractionItemsこれらの実装を支援する関数。

例：

import { Interaction } from 'chart.js';
import { getRelativePosition } from 'chart.js/helpers';
/**
 * Custom interaction mode
 * @function Interaction.modes.myCustomMode
 * @param {Chart} chart - the chart we are returning items from
 * @param {Event} e - the event we are find things at
 * @param {InteractionOptions} options - options to use
 * @param {boolean} [useFinalPosition] - use final element position (animation target)
 * @return {InteractionItem[]} - items that are found
 */
Interaction.modes.myCustomMode = function(chart, e, options, useFinalPosition) {
  const position = getRelativePosition(e, chart);
  const items = [];
  Interaction.evaluateInteractionItems(chart, 'x', position, (element, datasetIndex, index) => {
    if (element.inXRange(position.x, useFinalPosition) && myCustomLogic(element)) {
      items.push({element, datasetIndex, index});
    }
  });
  return items;
};
// Then, to use it...
new Chart.js(ctx, {
    type: 'line',
    data: data,
    options: {
        interaction: {
            mode: 'myCustomMode'
        }
    }
})

TypeScript を使用している場合は、新しいモードを登録する必要もあります。

declare module 'chart.js' {
  interface InteractionModeMap {
    myCustomMode: InteractionModeFunction;
  }
}

←要素レイアウト→